/*
 * @Author: peng.chen2 peng.chen2@rt-mart.com
 * @Date: 2025-07-26 10:00:00
 * @LastEditors: peng.chen2
 * @LastEditTime: 2025-08-01 15:37:26
 * @FilePath: /rt-monitoring/src/styles/theme.css
 * @Description: 主题化样式文件
 */

/* CSS 变量定义 */
:root {
  --primary-color: #00d4ff;
  --primary-hover: #40e0ff;
  --primary-active: #0066ff;
  --success-color: #00ff88;
  --warning-color: #ffaa40;
  --error-color: #ff4d4f;
  --info-color: #0066ff;

  --bg-color: #0f1c3c;
  --panel-bg: rgba(6, 30, 93, 0.5);

  --header-start-bg: rgba(16, 66, 126, 0.8);
  --header-end-bg: rgba(36, 108, 182, 0.8);

  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.5);

  --border-primary: rgba(0, 149, 255, 0.3);
  --border-secondary: rgba(0, 149, 255, 0.2);
  --border-light: rgba(0, 149, 255, 0.1);

  --shadow-primary: 0 0 15px rgba(0, 149, 255, 0.2);
  --shadow-secondary: 0 0 10px rgba(0, 149, 255, 0.1);

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;

  --border-radius: 6px;
  --border-radius-lg: 8px;
  --border-radius-sm: 4px;

}

/* 亮色主题变量 */
[data-theme='light'] {
  --primary-color: #0066ff;
  --primary-hover: #4080ff;
  --primary-active: #0052cc;

  --bg-color: #f1ecec;
  --panel-bg: #ffffff;

  --header-start-bg: #fafafa;
  --header-end-bg: #ffffff;

  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.65);
  --text-tertiary: rgba(0, 0, 0, 0.45);

  --border-primary: #d9d9d9;
  --border-secondary: #f0f0f0;
  --border-light: #fafafa;

  --shadow-primary: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-secondary: 0 1px 4px rgba(0, 0, 0, 0.1);
  --ant-button-text-text-color: red!important;
}

/* 面板样式主题化 */

.panel-title::before {
  background: linear-gradient(to bottom, var(--primary-color), var(--primary-active)) !important;
}

/* 标签页主题化 */
.tabs {
  border-bottom: 1px solid var(--border-primary) !important;
}

.tab {
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

.tab.active {
  background: var(--border-primary) !important;
  color: var(--primary-color) !important;
}

.tab:hover:not(.active) {
  background: var(--border-light) !important;
  color: var(--text-primary) !important;
}

/* 状态标签主题化 */
.status-connected {
  background: rgba(0, 255, 136, 0.1) !important;
  color: var(--success-color) !important;
  border: 1px solid var(--success-color) !important;
}

.status-disconnected {
  background: rgba(255, 77, 79, 0.1) !important;
  color: var(--error-color) !important;
  border: 1px solid var(--error-color) !important;
}

/* 头部主题化 */
.header {
  background: linear-gradient(
    90deg,
    var(--header-start-bg) 0%,
    var(--header-end-bg) 50%,
    var(--header-start-bg) 100%
  ) !important;
  border-radius: 10px;
  box-shadow: var(--shadow-primary) !important;
}

/* 统计卡片主题化 */
.stats-card {
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-primary) !important;
}

.stats-value {
  background: linear-gradient(to right, var(--primary-color), var(--primary-active)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.stats-label {
  color: var(--text-secondary) !important;
}

/* Ant Design 组件主题化覆盖 */
.ant-card {
  background: var(--panel-bg) !important;
  border-color: var(--border-primary) !important;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
}

.ant-table-tbody > tr:hover > td {
  background: var(--border-light) !important;
}

.ant-tabs-tab {
  color: var(--text-secondary) !important;
}

.ant-tabs-tab-active {
  color: var(--primary-color) !important;
}

.ant-tabs-ink-bar {
  background: var(--primary-color) !important;
}

.ant-tag {
  border-radius: var(--border-radius-sm) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .panel {
    padding: var(--spacing-sm) !important;
  }

  .panel-title {
    font-size: 16px !important;
  }

}

@media (min-width: 1920px) {
  .panel-title {
    font-size: 20px !important;
  }

}

/* 动画效果 */
.theme-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滚动条主题化 */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--primary-color) 0%,
    var(--primary-active) 100%
  ) !important;
  border: 1px solid var(--primary-color) !important;
}

::-webkit-scrollbar-track {
  background: var(--panel-bg) !important;
  box-shadow: inset 0 0 3px var(--border-light) !important;
}